<template>
<section @click="clickCurrent('current')" @mousedown="clickCurrent('dragging')">
    <div :class="['custorm--modelbox', 'marketgroup-show', (custormCurrent == custormIndex)?'drag active':'drag']">
        <div v-if="custormItemData.params.isshow == '2'" class="noshow" v-bind:style="{'background-image':`url(${getPath('noshow.png')})`}"></div>
        <div style="overflow: hidden;">
            <div v-if="custormItemData.style.display == '1'" class="es-seckill-group style-row">
                <div class="group">
                    <div>
                        <!-- ---- -->
                        <div v-for="(item, index) in (custormItemData.params.choostype == '3')? custormItemData.params.listitem:custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData" :key="index" class="es-seckill-col">
                            <div class="image">
                                <!-- <span v-bind:style="{background:custormItemData.style.iconcolor}">{{custormItemData.style.text}}</span> -->
                                <img
                                :src="`${custormItemData.params.choostype == '3'?getPath('default_picture.png'):item.edit?getPath(item.edit.thumb):item.image.file_path}`"
                                alt=""
                                draggable="false"
                            ><span class="group-img-btn">{{custormItemData.params.choostype == '3'?'2':item.edit?item.edit.userNum:item.group_number}}人团</span>
                            </div>
                                <div class="detail">
                                    <p class="title  line-hide"><span v-if="custormItemData.style.name == '1'">{{custormItemData.params.choostype == '3'?'这里是商品标题':item.edit?item.edit.name:item.goods_name}}</span></p>
                                    <div class="subtitle line-hide flex-row flex-justify-b flex-align-c">
                                        <span class="sub-price" v-if="custormItemData.style.price == '1'"><span class="icon">￥</span>{{custormItemData.params.choostype == '3'?'0.10':item.edit?item.edit.price:item.groups_price}}</span>
                                    </div>
                                    <div class="subtitle line-hide flex-row flex-justify-b flex-align-c">
                                        <span class="sub-price line-through"><span class="icon" style="white-space: nowrap;">单购价:￥{{custormItemData.params.choostype == '3'?'1.00':item.edit?item.edit.oldprice:item.original_price}}</span></span>
                                        <div class="group-btn">
                                            <span class="sub-price line-through" v-if="custormItemData.style.oldprice == '1'"><span class="icon">已拼{{custormItemData.params.choostype == '3'?'100':item.edit?item.edit.sales:item.is_sold}}件</span></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- ---- -->
                        </div>

                    </div>
                </div>

                <div v-if="custormItemData.style.display == '2'" class="es-seckill-group style-col">
                    <div class="group">
                        <div>
                            <!-- ---- -->
                            <div v-for="(item, index) in custormItemData.params.choostype == '3'? custormItemData.params.listitem:custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData" :key="index" class="es-seckill-col flex-row">
                                <div class="image">
                                    <!-- <span v-bind:style="{background:custormItemData.style.iconcolor}">{{custormItemData.style.text}}</span> -->
                                    <img
                    :src="`${custormItemData.params.choostype == '3'?getPath('default_picture.png'):item.edit?getPath(item.edit.thumb):item.image.file_path}`"
                    alt=""
                    draggable="false"
                  ></div>
                                    <div class="detail flex-col flex-justify-b">
                                        <div class="flex-col">
                                            <p class="title  line-hide"  style="margin-bottom:2px;"><span v-if="custormItemData.style.name == '1'">{{custormItemData.params.choostype == '3'?'这里是商品标题':item.edit?item.edit.name:item.goods_name}}</span></p>
                                            <div class="sales-num">
                                                <div class="flex-row flex-align-c">
                                                    <div class="flex-row flex-align-c">
                                                        <span class="orders-gray">已拼{{custormItemData.params.choostype == '3'?'100':item.edit?item.edit.sales:item.is_sold}}件</span>
                                                    </div>
                                                    <div class="subtitle line-hide">
                                                        <p>
                                                            <span class="sales-btn">{{custormItemData.params.choostype == '3'?'2':item.edit?item.edit.userNum:item.group_number}}人团</span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="sales-num col-num">
                                            <div class="flex-row flex-justify-b flex-align-c">
                                                <div class="flex-col">
                                                    <span class="sub-price" v-if="custormItemData.style.price == '1'"><span class="icon">￥</span>{{custormItemData.params.choostype == '3'?'0.10':item.edit?item.edit.price:item.groups_price}}</span>
                                                    <p  class="orders-gray">单购价: ￥{{custormItemData.params.choostype == '3'?'1.00':item.edit?item.edit.oldprice:item.original_price}}</p>
                                                </div>
                                                <div class="flex-row flex-align-c">
                                                    <div class="group-btn col-list"><span >去拼团</span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- ---- -->
                            </div>

                        </div>
                    </div>

                </div>

                <div class="btn-edit-del" @click="delCurrent"><span class="btn-del iconfont icon icon-close"></span></div>
            </div>
</section>
</template>

<script>
import defaultConfig from './utils/showConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.marketgroup-show {

    .flex,
    .flex-column {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .group-btn {
        color: #fff;
			padding: 0 6px;
			line-height: 22px;
			border-radius: 8px;
			font-size: 12px;
			height: 22px;
			&.col-list{
				background: #fd463e;
                width: 75px;
                padding: 2px 0;
                text-align: center;
                color: #fff;
                font-weight: bold;
                box-sizing: content-box;
                border-radius: 14px;
			}
    }

    .es-seckill-title {
        margin: 20px 20px 6px;
        height: 22px;
        font-size: 11px;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .es-seckill-title .title {
        .seckill-title {
            font-size: 18px;
            font-weight: 700;
            color: #3d404d;
            background: #fff;
        }

        font-size: 16px;

        img {
            vertical-align: middle;
            zoom: .5;
        }

        &+p {
            color: #999;
            margin-right: -5px;
        }
    }

    .es-seckill-title span {
        background: #fff;
        display: inline-block;
        color: #333;
        text-align: center;
        line-height: 18px;
        width: 17px;
    }

    .es-seckill-title span:first-of-type {
        width: auto;
        background: #fe504f;
        color: #fff;
        font-size: 12px;
        margin-right: 8px;
        padding: 1px 3px;
    }

    .es-seckill-group.style-row .group {
        overflow: hidden;

        &>div {
            font-size: 0;
        }
    }

    .es-seckill-group.style-row .group .es-seckill-col {
        display: inline-block;
        padding: 0 20px;
        width: 50%;
        box-sizing: border-box;
        border-radius: 2px;

        &:nth-of-type(odd) {
			padding-right: 10px;
		}
		&:nth-of-type(even) {
			padding-left: 10px;
		}

        .image {
            position: relative;
            height: 150px;
            margin: 4px 0 8px;
            width: 100%;
            border-radius: 3px;
            .group-img-btn{
                display: block !important;
                position: absolute;
                background:-webkit-gradient(linear, left top, right top, from(#fe504f), to(#fe854f));
                background:-o-linear-gradient(left, #fe504f, #fe854f);
                background:linear-gradient(90deg, #fe504f, #fe854f);
                border-radius:3px 0 3px 0;
                top: 10px;
                left: 0;
                height: 18px;
                line-height: 19px;
                width: 36px;
                color: #fff;
                text-align: center;
                font-size: 12px;
            }
            img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                border-radius: 3px;
                display: block;
            }
        }
    }

    .es-seckill-group.style-row .group .es-seckill-col .detail {
        width: 100%;
        font-size: 12px;
        padding-bottom: 20px;

        .title {
            height: 41px;
            font-size: 14px;
        }

        .subtitle {
            height: 24px;
            line-height: 1;

            .sub-price {
                font-size: 14px;

                .icon {
                    font-size: 12px;
                }

                &:not(.line-through) {
                    font-size: 20px;
                    color: #fd463e;
                    font-weight: 600;
                }

                &.line-through {
                    color: #999;
                    text-decoration: none;
                }
            }
        }

        .sales-num {
            .num {
                font-size: 14px;
                color: #999;
            }

            .progress {
                width: 50px;
                height: 10px;
                border-radius: 10px;
                line-height: 10px;
                background: rgb(242, 242, 242);

                .progress-num {
                    display: inline-block;
                    background: #fd463e;
                    width: 40%;
                    height: 10px;
                    border-radius: 10px;
                }
            }

            // .sales-btn{
            //     border: 1px solid #fd463e;
            //     color: #fd463e;
            //     padding: 0 10px;
            //     border-radius: 30px;
            //     font-size: 14px;
            //     height: 26px;
            // }
        }
    }

    .es-seckill-group.style-row .group .es-seckill-col .detail .price .num {
        color: #999ca7;
        font-size: 9px;
        line-height: 25px;
        margin-left: 6px;
    }

    .es-seckill-group.style-row .group .es-seckill-col .detail .price .flex {
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .es-seckill-group.style-row .group .es-seckill-col .detail .price span {
        font-size: 16px;
    }

    //   style2
    .es-seckill-group.style-col .group {
        overflow: hidden;

        &>div {
            white-space: nowrap;
            font-size: 0;
        }
    }

    .es-seckill-group.style-col .group .es-seckill-col {
        padding: 15px;
        box-sizing: border-box;
        border-radius: 2px;
        // border-bottom: 1px solid #999;
        padding-bottom: 0;

        .image {
            position: relative;
            height: 115px;
            width: 115px;
            margin: 4px 0 4px;
            border-radius: 5px;
            .group-img-btn{
                display: block !important;
                position: absolute;
                background:-webkit-gradient(linear, left top, right top, from(#fe504f), to(#fe854f));
                background:-o-linear-gradient(left, #fe504f, #fe854f);
                background:linear-gradient(90deg, #fe504f, #fe854f);
                border-radius:3px 0 3px 0;
                top: 10px;
                left: 0;
                height: 18px;
                line-height: 19px;
                width: 36px;
                color: #fff;
                text-align: center;
                font-size: 12px;
            }
            img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                border-radius: 5px;
                display: block;
            }
        }
    }

    .es-seckill-group.style-col .group .es-seckill-col .detail {
        width: 0;
        flex-grow: 1;
        font-size: 12px;
        margin-left: 15px;
        margin-right: 0;
        height: 135px;
        .title {
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 215px;
        }
        .sales-num.col-num{
            padding-bottom:10px;
            border-bottom:.5px solid #e5e5e5;
        }
        .sub-price {
                font-size: 14px;

                .icon {
                    font-size: 12px;
                }

                &:not(.line-through) {
                    font-size: 18px;
                    color: #fd463e;
                    font-weight: 600;
                }

                &.line-through {
                    color: #999;
                    text-decoration: line-through;
                }
            }

        .progress-box {
            position: relative;
            height: 15px;
            margin-bottom: 15px;

            .progress {
                width: 55%;
                height: 15px;
                border-radius: 10px;
                line-height: 16px;
                text-align: center;
                background-color: #f7cfcd;

                .progress-num {
                    color: #fff;
                    display: inline-block;
                    height: 15px;
                    border-radius: 10px;
                }
            }
        }

        .sales-num {
            .sales-btn {
                margin-left: 4px;
                border: 1px solid #fd463e;
                color: #fd463e;
                padding: 0 6px;
                border-radius: 4px;
                font-size: 12px;
                height: 26px;
            }
        }
    }

    .es-seckill-group.style-col .group .es-seckill-col .detail .price .num {
        color: #999ca7;
        font-size: 9px;
        line-height: 25px;
        margin-left: 6px;
    }

    .es-seckill-group.style-col .group .es-seckill-col .detail .price .flex {
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .es-seckill-group.style-col .group .es-seckill-col .detail .price span {
        font-size: 16px;
    }
}
</style>
